import { useParams } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { courseApi } from '../api/course';
import { Star, Clock, Eye } from 'lucide-react';
import { cartApi } from '../api/cart';

export function CourseDetail() {
  const { id } = useParams<{ id: string }>();
  const queryClient = useQueryClient();

  const { data: response, isLoading } = useQuery({
    queryKey: ['course', id],
    queryFn: () => courseApi.getCourse(Number(id)),
  });

  const addToCartMutation = useMutation({
    mutationFn: (courseId: number) => cartApi.addToCart(courseId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['cart'] });
    },
  });

  const course = response?.data;

  const handleAddToCart = () => {
    if (course?.id) {
      addToCartMutation.mutate(course.id);
    }
  };

  if (isLoading) {
    return <div className="text-center py-8">加载中...</div>;
  }

  if (!course) {
    return <div className="text-center py-8">课程不存在</div>;
  }

  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow">
        <div className="p-6 space-y-6">
          <h1 className="text-3xl font-bold">{course.title}</h1>
          
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <img 
                src={course?.thumbnail || 'https://via.placeholder.com/600x400'} 
                alt={course.title}
                className="w-full rounded-lg h-64 object-cover"
              />
            </div>
            
            <div className="space-y-4">
              <div className="flex items-center space-x-2">
                <Star className="text-yellow-500" size={20} />
                <span>{course.rating || 4.5}</span>
              </div>
              
              <div className="flex items-center space-x-2">
                <Clock className="text-gray-500" size={20} />
                <span>{course.duration || 2}小时</span>
              </div>
              
              <div className="flex items-center space-x-2">
                <Eye className="text-gray-500" size={20} />
                <span>{course.viewCount || 1000} 次观看</span>
              </div>
              
              <div className="text-2xl font-bold text-blue-600">
                {course.price === 0 ? '免费' : `¥${course.price}`}
              </div>
              
              <button
                onClick={handleAddToCart}
                disabled={addToCartMutation.isPending}
                className="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
              >
                {addToCartMutation.isPending ? '添加中...' : '加入购物车'}
              </button>
              
              <div className="flex flex-wrap gap-2">
                <span className="bg-gray-100 px-3 py-1 rounded-full text-sm">
                  {course.category}
                </span>
              </div>
            </div>
          </div>
          
          <div>
            <h2 className="text-xl font-semibold mb-3">课程介绍</h2>
            <p className="text-gray-700 leading-relaxed">{course.description}</p>
          </div>
        </div>
      </div>
    </div>
  );
}